<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <title>星座邀请</title>
    <link rel="stylesheet" href="css/wap/main.css"/>
</head>
<body style="background:url(images/wap/xingzuo/my_bg.png) repeat -1.6rem -8rem;">
    <div class="Mask xz_Mask" style="display:none;"></div>
    <div class="exchange_mask xz_mask"  style="display:none;">
        <p class="mask_p1">
            <img src="images/wap/maskTop.png" alt="">
            <span>解锁成功</span>
        </p>
        <p class="mask_p2">
            <img src="images/wap/xingzuo/baiyang.png" alt="">
<!--             <span>您不能给自己解锁</span>！
 -->        </p>
        <p class="mask_p3 xz_open"><a>确定</a></p>
    </div>
    <div class="xz_describe">
        <div class="xz_txt">
            <h4>白羊座<span>×</span></h4>
            <p>简介：</p>
            <p>
                <span>拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体育课体育日体</span>
                <img src="images/wap/xingzuo/baiyang.png" alt="">
            </p>
            <p>特点：</p>
            <p>
                <span>拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一
                </span>
                <span>拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体</span>
                <span>拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体。</span>
            </p>
        </div>
    </div>
    <div class="xz_my xz_invi">
        <p>
            <img src="images/wap/xingzuo/xz_inviteZd.png" alt="">
        </p>
        <p>
            我是<span>小明小明小明</span>，<br>亲爱的，帮我解锁我可爱的星座伙伴吧！
        </p>
        <ul>
            <li>
                <img src="images/wap/xingzuo/baiyang1.png" alt="">
                <img src="images/wap/xingzuo/baiyang.png" alt="">
                <a class="xz_open">
                    <img src="images/wap/xingzuo/xz_open1.png" alt="">
                    <img src="images/wap/xingzuo/xz_open2.png" alt="">
                </a>
            </li>
            <li>
                <img src="images/wap/xingzuo/jinniu1.png" alt="">
                <img src="images/wap/xingzuo/jinniu.png" alt="">
                <a class="xz_open">
                    <img src="images/wap/xingzuo/xz_open1.png" alt="">
                    <img src="images/wap/xingzuo/xz_open2.png" alt="">
                </a>
            </li>
            <li>
                <img src="images/wap/xingzuo/shuangzi1.png" alt="">
                <img src="images/wap/xingzuo/shuangzi.png" alt="">
                <a class="xz_open">
                    <img src="images/wap/xingzuo/xz_open1.png" alt="">
                    <img src="images/wap/xingzuo/xz_open2.png" alt="">
                </a>
            </li>
            <li>
                <img src="images/wap/xingzuo/juxie1.png" alt="">
                <img src="images/wap/xingzuo/juxie.png" alt="">
                <a class="xz_open">
                    <img src="images/wap/xingzuo/xz_open1.png" alt="">
                    <img src="images/wap/xingzuo/xz_open2.png" alt="">
                </a>
            </li>
            <li>
                <img src="images/wap/xingzuo/shizi1.png" alt="">
                <img src="images/wap/xingzuo/shizi.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/chunv1.png" alt="">
                <img src="images/wap/xingzuo/chunv.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/tiancheng1.png" alt="">
                <img src="images/wap/xingzuo/tiancheng.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/tianxie1.png" alt="">
                <img src="images/wap/xingzuo/tianxie.png" alt="">
            </li>
            <li >
                <img src="images/wap/xingzuo/sheshou1.png" alt="">
                <img src="images/wap/xingzuo/sheshou.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/mojie1.png" alt="">
                <img src="images/wap/xingzuo/mojie.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/shuiping1.png" alt="">
                <img src="images/wap/xingzuo/shuiping.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/shuangyu1.png" alt="">
                <img src="images/wap/xingzuo/shuangyu.png" alt="">
            </li>
        </ul>
        <p class="xz_myBtn">
            <a href="">
                <img src="images/wap/xingzuo/invite_check.png" alt="">
            </a>
            <a href="">
                <img src="images/wap/xingzuo/invite_my.png" alt="">
            </a>
        </p>
        <p class="xz_rule">
            <span>活动规则:</span><br>
            <span>1.点击“十二星座”解锁，帮助好友“一元购”活动。</span><br><span>点击“我的十二星座”，你也可以参与该活动。</span>
        </p>
    </div>
    <div class="xz_share">
        <p>            
            <img src="images/wap/xingzuo/share_arrow.png" alt="">
        </p>
        <p>
            <img src="images/wap/xingzuo/share_text.png" alt="">
        </p>
    </div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        // 星座的宽和高
        var liWidth=parseInt($('.xz_my ul li').css("width"));
        console.log($('.xz_my ul li').css("width"));
        var liHeight=liWidth*1.115+'px';
        console.log(liHeight);
        $('.xz_my ul li').css({"height":liHeight});
        var suoWidth1=liWidth*0.664+'px';
        var suoWidth2=liWidth*0.344+'px';
        // 锁的宽和高
        $('.xz_my ul li a img:nth-child(1)').css({"width":suoWidth1});
        $('.xz_my ul li a img:nth-child(2)').css({"width":suoWidth2});
        
        // 星座解锁过程
        $('.xz_my ul').on('click','li:eq(0)',function(){
            var isOpen=0;
            console.log($(this).index());
            if(isOpen==1){
                $('.xz_describe').fadeIn();
            }else{
                console.log($(this).children());
                $('.xz_mask').css({"display":"block"});
                $(".xz_open a").click(function(){
                    $('.xz_mask').css({"display":"none"});
                    setTimeout(function(){
                        console.log(12);
                        $('.xz_my ul li:eq(0)').children().eq(2).children().eq(0).toggleClass('xz_rotateLeft');
                        $('.xz_my ul li:eq(0)').children().eq(2).children().eq(1).toggleClass('xz_rotateRight');
                        $('.xz_my ul li:eq(0)').children().eq(2).fadeOut();
                        $('.xz_my ul li:eq(0)').children().eq(0).css({"display":"none"});
                        $('.xz_my ul li:eq(0)').children().eq(1).css({"display":"block"});
                        },200);
                });
                
            }
        });
        $('.xz_my ul').on('click','li:eq(1)',function(){
            var isOpen=0;
            console.log($(this).index());
            if(isOpen==1){
                $('.xz_describe').fadeIn();
            }else{
                console.log($(this).children());
                $('.xz_mask').css({"display":"block"});
                $(".xz_open a").click(function(){
                    $('.xz_mask').css({"display":"none"});
                    setTimeout(function(){
                        console.log(12);
                        $('.xz_my ul li:eq(1)').children().eq(2).children().eq(0).toggleClass('xz_rotateLeft');
                        $('.xz_my ul li:eq(1)').children().eq(2).children().eq(1).toggleClass('xz_rotateRight');
                        $('.xz_my ul li:eq(1)').children().eq(2).fadeOut();
                        $('.xz_my ul li:eq(1)').children().eq(0).css({"display":"none"});
                        $('.xz_my ul li:eq(1)').children().eq(1).css({"display":"block"});
                    },200);
                });     
            }
        });

        // 星座描述弹出框
        $('.xz_txt h4 span').click(function(){
            $(this).parent().parent().parent().fadeOut();
        }); 
    </script>
</body>
</html>















